<template>
  <div class="login">
    <div class="login_title">古德温救我-把足球当理财</div>
    <div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              v-model="username"
              name="用户名"
              label=""
              @input="usernameChange"
              maxlength="12"
              placeholder="请输入账号（长度8-12位数字+字母）"
              :rules="[{ required: true, message: '长度8-12位数字+字母',pattern:/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,12}$/ }]"
          />
          <van-field
              v-model="password"
              type="password"
              name="密码"
              label=""
              maxlength="6"
              placeholder="请输入密码（6位数字密码）"
              :rules="[{ required: true, message: '请输入6位数字密码',pattern: /^\d{6}$/ }]"
          />
          <van-field
              v-model="password1"
              type="password"
              name="密码"
              label=""
              maxlength="6"
              placeholder="请输入确认密码（6位数字密码）"
              :rules="[{ required: true, message: '请输入6位数字密码',pattern: /^\d{6}$/  }]"
          />
        </van-cell-group>
        <div style="user-select: none;padding: 18px">
          <selectView v-model:value="isPassing.type" :jiazai = 'true'></selectView>

        </div>
        <div class="tips">请牢记账号密码，丢失不可找回只能重新注册</div>
        <div style="margin: 16px;" class="login_btn">

          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
          <div class="register">已有账号？请点这里 <span @click="toLogin" style="color: #fff">>>登录<<</span></div>
          <div class="information">
            <svg-icon style="width: 1.2em;height: 1.2em;margin-right: 2px;" name="fromRz" /> 个人信息将被多层加密安全处理</div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
// import dragVerify from '@/components/selectView/index.vue'
import { ref,reactive,onMounted ,nextTick} from 'vue';
import {useRouter} from "vue-router";
import {getListApiError, UserEnroll} from "@/api/mock";
import {showFailToast,showSuccessToast} from "vant";

onMounted(() => {
  nextTick(()=>{
    if (location.href.indexOf("#reloaded") == -1) {
      setTimeout(()=>{
        location.replace(location.href + '#reloaded')
      },800)

    }
  })

})
const router = useRouter()

const isPassing = reactive({
  type:false
});
const loading = ref(false)
const usernameChange = ()=>{
  username.value= username.value.toLowerCase()
}
const toLogin = ()=>{
  // show.value = false
  router.push({
    path: "/login",
    query: {
      mode: "",
    },
  });
}
const userEnroll = ()=>{
  if(!isPassing.type){
    showFailToast('请拖动滑块验证');
    return;

  }
  if(password.value!==password1.value){
    showFailToast("两次密码输入不一致请重新输入");

    return
  }
  if(  loading.value){
    return;
  }
  username.value= username.value.toLowerCase()
  let pa = {
    name:username.value,
    password:password.value
  }
  loading.value = true

  UserEnroll(pa).then(
      (res) => {
        if (+res.code === 200){

          showSuccessToast(res.msg);
          loading.value = false

          toLogin()
        }else{
          showFailToast(res.msg);
          loading.value = false

        }

      },
      err => {
        console.log(err);
        loading.value = false
        // showFailToast("请求有误");
      }
  );
}
// const isPassing = false;
const username = ref('');
const password = ref('');
const password1 = ref('');
const onSubmit = (values) => {
  userEnroll()
  console.log('submit', values);
};
const isPassingtrue = ()=>{
  // debugger
  isPassing.value = true
  // isPassing = true
  // isPassing.value = true
}
const handlePass = ()=>{
  // isPassing.value = true
}


</script>

<style scoped lang="less">
.tips{
  font-weight:500;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.register,.information{
  color:#B9B9B9;
  font-size: 12px;
  text-align: center;
}
.information{
  //background-color: #B9B9B9;
  background-color: #373737;
  display:flex;
  justify-content: center;
  align-items: center;
  //height:30px;
  border-radius:30px;
  line-height: 30px;

}
.register{
  line-height:46px;
}
::v-deep .van-field__control{
  color: #fff;
}
::v-deep .van-cell:after{
  display:none;
}
::v-deep .van-cell{
  min-height: 50px;
  line-height: 30px;
  background-color: #373737;
  border-radius: 6px;
  color:#fff;
}
::v-deep .van-cell-group .van-cell:not(:first-child){
  margin-top: 20px;

}
::v-deep .van-cell-group{
  background-color: rgb(40,40,40);
  //background-color: #373737;
  //margin-top: 20px;
}
.login{
  .login_title{
    font-size: 16px;
    color: #fff;
    line-height: 44px;
    text-align: center;
  }

}
.login_btn{
  padding:0 50px;
  height: 50px;
  .van-button--primary{
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 600;
    border:0;
  }
  .van-button{
    background-color: #1A674E;
    border-radius: 8px;
  }
}

</style>
